/*css reset*/
*{margin:0;padding:0;border:none;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

ul,ol,li{list-style:none;}
i,em{font-style:normal;}
a{ text-decoration:none;}
/*reset end*/
/*basic start*/
@media screen and (min-width:240px){html,body{font-size:10px;}}
@media screen and (min-width:320px){html,body{font-size:12px;}}
@media screen and (min-width:480px){html,body{font-size:14px;}}
@media screen and (min-width:560px){html,body{font-size:16px;}}
@media screen and (min-width:640px){html,body{font-size:18px;}}
@media screen and (min-width:720px){html,body{font-size:20px;}}
@media screen and (min-width:800px){html,body{font-size:22px;}}
@media screen and (min-width:1024px){html,body{font-size:24px;}}
.clearfix:after{clear:both;height:0;font-size:0;display:block;content:"";visibility:hidden;}
/*basic end*/

/*self s  background-color:#55ffffff;background:rgba(255,255,255,0.5);*/

.hn_list{ width:95%; padding:0 2.5%;}
.hn_list li{ width:100%; padding:0.5rem 0; }
.hn_list li .l_left{ float:left; width:72.5%; padding-left:3%;}
.hn_list li .l_left p{ font-size:1rem; line-height:1.416rem; color:#000;}
.hn_list li .l_left p .color_1{ color:#ff0000;}
.hn_list li .l_left p .color_2{ color:#d301da;}
.hn_list li .l_left p img{ display:inline-block; padding-left:0.5rem; height:1.16rem; vertical-align:middle;}
.hn_list li .l_right{ float:right; width:20%; margin-top:0.5rem; margin-right:1.5%;}
.hn_list li .l_right a{ display:block; background-color:#f57598; color:#fff; width:100%; height:1.916rem; line-height:1.916rem; text-align:center;}
/*self e*/